<template>
  <div>
    <!-- <div style="width:10%">
            <h3 style="float: left">专业</h3>
            <Divider style="height: 2px;margin:15px 0;display: inline-block;" />
        </div>
        <Select v-model="model1" style="width:200px; float: left; margin-bottom: 20px; text-align: left" filterable
            clearable>
            <OptionGroup label="理工类">
                <Option v-for="item in cityList1" :value="item.value" :key="item.value">{{item.value}}</Option>
            </OptionGroup>
            <OptionGroup label="文艺类">
                <Option v-for="item in cityList2" :value="item.value" :key="item.value"></Option>
            </OptionGroup>
    </Select>-->
    <div style="width:10%">
      <h3 style="float: left">版本列表</h3>
      <Divider style="height: 2px;margin:15px 0;display: inline-block;" />
    </div>
    <Table border :columns="columnshead" :data="datat">
      <template slot-scope="{ row }" slot="action">
        <Button size="small" type="error" @click="verify(row)">审核</Button>
        <Button size="small" type="success" @click="publish(row)">发布</Button>
      </template>
      <template slot-scope="{ row }" slot="model">
        <Button size="small" type="primary" @click="create(row)">创 建</Button>
      </template>
    </Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page :total="total" :current="1" show-elevator show-total @on-change="changePage"></Page>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columnshead: [
        {
          title: "计划名称",
          key: "mvName",
          sortable: true
        },
        {
          title: "计划状态",
          key: "mvState"
        },
        {
          title: "审批状态",
          key: "mvApprstate"
        },
        {
          title: "创建日期",
          key: "mvCredate"
        },
        {
          title: "学历处意见",
          key: "mvEdopi"
        },

        {
          title: "领导意见",
          key: "mvLeaderopi"
        },
        {
          title: "操作",
          slot: "action",
          width: 150,
          align: "center"
        },
        {
          title: "以此为模板",
          slot: "model",
          width: 100,
          align: "center"
        }
      ],
      datat: [],
      total: 1,
      current: 1,
      plan: {
        mvName: "2019年软件工程专业计划",
        mvState: "新建",
        mvApprstate: "",
        mvCredate: this.getDate()
      }
      // cityList1: [
      //     {
      //         value: '软件工程'
      //     },
      //     {
      //         value: '计算机科学与技术'
      //     },
      //     {
      //         value: '统计'
      //     },
      //     {
      //         value: '应用数学'
      //     },
      // ],
      // cityList2: [
      //     {
      //         value: '表演'
      //     },
      //     {
      //         value: '服装设计'
      //     },
      //     {
      //         value: '编导'
      //     },
      // ],
      // model1: '软件工程'
    };
  },
  created() {
    this.$axios
      .get(
        this.$host + "/professional/plan/majorVersions?pageNum=1&pageSize=10"
      )
      .then(res => {
        this.datat = res.data.data.list;
        this.total = res.data.data.total;
      });
  },
  methods: {
    changePage(currentPage) {
      this.$axios
        .get(
          this.$host +
            "/professional/plan/majorVersions?pageNum=" +
            currentPage +
            "&&pageSize=10"
        )
        .then(res => {
          this.datat = res.data.data.list;
          this.current = currentPage;
        });
    },
    create(row) {
      this.datat.unshift(this.plan);
      this.total++
      
    },
    verify(row) {
      if (row.mvState == "新建" && row.mvApprstate != "计划科提交") {
        this.$Message.success(row.mvName + "提交审核成功");
        row.mvApprstate = "计划科提交";
      } else this.$Message.error("该计划已提交审核");
    },
    publish(row) {
      if (row.mvState == "已启用") this.$Message.error("该计划已发布");
      else if (row.mvApprstate == "计划发布启用") {
        this.$Message.success(row.mvName + "发布成功");
        row.mvApprstate = "已发布";
        row.mvState = "已启用";
      } else this.$Message.error("审核未通过，发布失败");
    },
    getDate() {
      var nowDate = new Date();
      let date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate()
      };
      let systemDate = date.year + "-" + 0 + date.month + "-" + 0 + date.date;
      return systemDate;
    }
  }
};
</script>